<template>
  <div class="m-fnc-edit-phone-pwd">
    <el-dialog
      :close-on-click-modal="false"
      class="phone_dialog_box"
      width="480px"
      title="手机改密"
      :visible.sync="visible"
      :before-close="closePhoneDialog"
      @close="closePhoneDialog"
    >
      <el-steps
        class="steps_box"
        align-center
        :active="phoneStepStatus"
        :space="300"
      >
        <el-step title="验证身份信息"></el-step>
        <el-step title="设置新的密码"></el-step>
        <el-step title="密码修改成功"></el-step>
      </el-steps>
      <p class="news">为确认身份，我们需验证您的安全手机</p>
      <p class="news">如果您当前的手机号已无法使用请联系客服</p>
      <div class="phone_number_box">
        当前安全手机：<span class="phone_number">{{
          currentUserInfo.phone || ''
        }}</span>
      </div>
      <div class="verification_code_box">
        <el-input
          v-model="verificationCode"
          class="verification_code"
          placeholder="请输入短信验证码"
          autocomplete="off"
        ></el-input>
        <span
          v-if="updatePasswordByPhoneVerificationStatus === 0"
          class="get_verification_code"
          @click="
            updatePasswordByPhoneSendVerificationCode(cookie.get('phone'), 1)
          "
          >获取验证码</span
        >
        <span
          v-if="updatePasswordByPhoneVerificationStatus === 2"
          class="aggin_get_verification_code"
          @click="
            updatePasswordByPhoneSendVerificationCode(cookie.get('phone'), 1)
          "
          >重新获取验证码</span
        >
        <span
          v-if="updatePasswordByPhoneVerificationStatus === 1"
          class="get_verification_code_after"
          ><span>{{ updatePasswordByPhoneTime }}</span
          >秒可重新获取</span
        >
      </div>
      <div
        v-loading="update_password_loading"
        class="next_btn"
        @click="
          updatePasswordByPhoneNext(cookie.get('phone'), verificationCode)
        "
      >
        下一步
      </div>
      <div v-if="errorState" class="error_box">
        <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      class="phone_dialog_update_password_box"
      width="480px"
      title="修改密码"
      :visible.sync="phoneDialogPasswordUpdateVisible"
      @close="closeDialog('updatePasswordByPhoneForm')"
    >
      <el-steps class="steps_box" align-center :active="phoneStepStatus">
        <el-step title="验证身份信息"></el-step>
        <el-step title="设置新的密码"></el-step>
        <el-step title="密码修改成功"></el-step>
      </el-steps>
      <div class="remember_password">请牢记密码</div>
      <el-form
        ref="updatePasswordByPhoneForm"
        class="dialog_form_box"
        :rules="updatePasswordByPhoneRules"
        :model="updatePasswordByPhoneForm"
      >
        <el-form-item label="" prop="newPassword" label-width="0">
          <el-input
            v-model="updatePasswordByPhoneForm.newPassword"
            type="password"
            placeholder="请输入新的密码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="alignnewPassword" label-width="0">
          <el-input
            v-model="updatePasswordByPhoneForm.alignnewPassword"
            type="password"
            placeholder="请再次输入新的密码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        v-loading="update_password_loading"
        class="next_btn"
        @click="updatePassword"
      >
        下一步
      </div>
      <div v-if="errorState" class="error_box">
        <i class="el-icon-circle-close"></i>验证码不正确，请重新输入
      </div>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_update_success"
      width="480px"
      :title="successTitle"
      :visible.sync="updateSuccessVisible"
    >
      <div class="success_icon"><i class="el-icon-circle-check"></i></div>
      <p class="success_reply">{{ successReply }}</p>
      <p class="prompt">{{ prompt }}</p>
      <div class="next_btn" @click="againLogin">重新登录</div>
    </el-dialog>
  </div>
</template>
<script>
import cookie from 'js-cookie';
import md5 from 'js-md5';
import {
  getCurrentUserInfo,
  sendVerificationCode,
  checkVerificationCodeReturnToken,
  updatePasswordByPhoneForPC,
} from '@const/api_staffCenter';

export default {
  name: 'MfncEditPhonePwd',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // eslint-disable-next-line consistent-return
    const checkPassword = (rule, value, callback) => {
      const reg = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/);
      const result = reg.test(value);
      if (!result) {
        return callback(new Error('密码由6-16位字母与数字组合'));
      }
      callback();
    };
    return {
      phoneStepStatus: 1,
      currentUserInfo: {},
      verificationCode: '',
      updatePasswordByPhoneVerificationStatus: 0,
      updatePasswordByPhoneTime: 30,
      maxNumber: 30,
      updatePasswordByPhoneSendVerificationCodeinterval: '',
      cookie,
      errorState: false,
      updatePasswordToken: '',
      phoneDialogPasswordUpdateVisible: false,
      updatePasswordByPhoneRules: {
        newPassword: [{ validator: checkPassword, trigger: 'blur' }],
        alignnewPassword: [{ validator: checkPassword, trigger: 'blur' }],
      },
      updatePasswordByPhoneForm: {
        password: '',
        newPassword: '',
        alignnewPassword: '',
      },
      update_password_loading: false,
      updateSuccessVisible: false,
      successTitle: '',
      successReply: '',
      prompt: '',
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.initDialog();
        }
      },
    },
  },
  mounted() {
    this.getCurrentUserInfo();
  },
  methods: {
    // 初始化当前用户基础信息
    getCurrentUserInfo() {
      this.$axios({
        method: 'post',
        url: getCurrentUserInfo,
        data: {},
      })
        .then((res) => {
          if (res.status === 200) {
            this.currentUserInfo = res.data.payload || {};
          }
        })
        .finally(() => {});
    },
    initDialog() {
      this.phoneStepStatus = 1;
      clearInterval(this.updatePasswordByPhoneSendVerificationCodeinterval);
      this.updatePasswordByPhoneVerificationStatus = 0;
      this.verificationStatus = 0;
      this.verificationCode = '';
      this.errorState = false;
    },
    closeDialog(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    closePhoneDialog() {
      this.$emit('close-dialog-visible', false);
    },
    // 手机修改密码获取验证码
    updatePasswordByPhoneSendVerificationCode(phone, type) {
      this.updatePasswordByPhoneTime = this.maxNumber;
      const $this = this;
      this.updatePasswordByPhoneVerificationStatus = 1;
      let tiemeInterval = 0;
      this.updatePasswordByPhoneSendVerificationCodeinterval = setInterval(
        () => {
          tiemeInterval += 1;
          if (tiemeInterval === $this.maxNumber) {
            tiemeInterval = $this.maxNumber;
            $this.updatePasswordByPhoneVerificationStatus = 2;
            clearInterval(
              $this.updatePasswordByPhoneSendVerificationCodeinterval
            );
          }
          $this.updatePasswordByPhoneTime = $this.maxNumber - tiemeInterval;
        },
        1000
      );
      this.$axios({
        method: 'post',
        url: sendVerificationCode,
        data: {
          phone,
          type,
        },
      });
    },
    // 手机修改密码下一步
    updatePasswordByPhoneNext(phone, verificationCode) {
      if (this.verificationCode) {
        this.update_password_loading = true;
        this.$axios({
          method: 'post',
          url: checkVerificationCodeReturnToken,
          data: {
            phone,
            verificationCode,
          },
        })
          .then((res) => {
            this.errorState = true;
            if (res.data.code === '0' && res.data.payload) {
              this.updatePasswordToken = res.data.payload;
              this.phoneStepStatus = 2;
              // this.phoneDialogVisible = false;
              this.$emit('close-dialog-visible', false);
              this.errorState = false;
              this.phoneDialogPasswordUpdateVisible = true;
            } else {
              this.errorState = true;
            }
          })
          .catch(() => {
            this.errorState = true;
          })
          .finally(() => {
            this.update_password_loading = false;
          });
      } else {
        this.$message({
          type: 'warning',
          message: '验证码不能为空',
        });
      }
    },
    // 修改密码updatePassword
    updatePassword() {
      const checkPassword =
        this.updatePasswordByPhoneForm.alignnewPassword ===
        this.updatePasswordByPhoneForm.newPassword;
      if (!checkPassword) {
        this.$message({
          type: 'warning',
          message: '两次输入密码不一致',
        });
        return;
      }
      this.$refs.updatePasswordByPhoneForm.validate((valid) => {
        if (valid) {
          const parms = {
            tokenId: this.updatePasswordToken,
            newPassword: md5(this.updatePasswordByPhoneForm.newPassword),
          };
          this.update_password_loading = true;
          this.$axios({
            method: 'post',
            url: updatePasswordByPhoneForPC,
            data: parms,
          })
            .then((res) => {
              if (res.data.code === '0') {
                this.$message({
                  type: 'success',
                  message: '密码修改成功!',
                });
                this.phoneStepStatus = 3;
                // this.phoneDialogVisible = false;
                this.$emit('close-dialog-visible', false);
                this.phoneDialogPasswordUpdateVisible = false;
                this.updateSuccessVisible = true;
                this.successTitle = '修改密码';
                this.successReply = '恭喜您！账号密码修改成功';
                this.prompt = '修改密码后需要使用新密码重新登录';
              } else {
                this.errorState = true;
              }
            })
            .catch(() => {
              this.errorState = true;
            })
            .finally(() => {
              this.update_password_loading = false;
            });
        }
      });
    },
    // 重新登录
    againLogin() {
      this.$store.commit('logout');
      window.location.href = this.$store.state.toNavPage;
      // this.$router.replace(this.$PATH_CONST.login_page);
    },
  },
};
</script>
<style lang="less">
.m-fnc-edit-phone-pwd {
  background-color: #f4f6fb;
  .el-dialog__header {
    border: none;
  }
  .el-dialog__body .description {
    font-size: 14px;
    color: #9ca6c7;
    margin-left: 80px;
    left: -8px;
  }
  .el-dialog__body {
    padding: 30px 20px !important;
    color: #333;
    font-size: 14px;
    word-break: break-all;
  }
  .phone_dialog_box .news,
  .phone_email_dialog_box .news,
  .phone_dialog_box .phone_number_box,
  .phone_email_dialog_box .phone_number_box {
    text-align: center;
    font-size: 14px;
    color: #666;
    height: 30px;
    line-height: 30px;
  }

  .steps_box {
    margin-bottom: 27px;
  }

  .phone_number_box {
    color: #666 !important;
    font-size: 16px !important;
    font-weight: bold;
    margin: 3px 0 29px 0;
  }
  .phone_number {
    font-size: 16px;
    color: #d85365;
  }
  .verification_code_box {
    width: 350px;
    height: 43px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    line-height: 43px;
    border-radius: 5px;
  }
  .verification_code {
    width: 195px;
  }
  .verification_code_box .el-input__inner {
    width: 195px;
    height: 43px;
    border: none !important;
  }
  .get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #2371c5;
  }
  .aggin_get_verification_code {
    margin-right: 6px;
    cursor: pointer;
    color: #2371c5;
  }
  .get_verification_code_after {
    color: #ccc;
    margin-right: 6px;
  }
  .el-icon-message {
    font-size: 14px;
  }
  .next_btn {
    width: 162px;
    height: 45px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #2371c5;
    line-height: 45px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .remember_password {
    font-size: 14px;
    margin-bottom: 10px;
    text-indent: 52px;
  }
  .phone_dialog_update_password_box {
    input {
      border-radius: 5px;
    }
  }
  .el-step__title {
    font-size: 12px;
  }
  .success_icon {
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    color: #7ed96d;
    margin-bottom: 18px;
  }
  .success_reply {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    text-align: center;
  }
  .prompt {
    text-align: center;
    margin-bottom: 68px;
  }
  .error_box {
    border: 1px solid #f56c6c;
    background-color: #ffeee6;
    color: #f56c6c;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 10px;
    border-radius: 5px;
    width: 350px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .el-icon-male {
    color: #338ced;
    font-weight: bold;
    font-size: 20px;
  }
  input::-webkit-input-placeholder {
    color: #d6d6d6;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #d6d6d6;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #d6d6d6;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #d6d6d6;
  }
  .el-dialog__body {
    padding-top: 58px;
  }
  //弹框样式
  .el-dialog {
    .el-step__head.is-wait {
      border-color: #e4ecf3;
      .el-step__icon {
        background-color: #e4ecf3;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-step__head.is-process {
      border-color: #e4ecf3;
      .el-step__icon {
        background-color: #e4ecf3;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-step__head.is-finish {
      border-color: #479af2;
      .el-step__icon {
        background-color: #479af2;
        color: #fff;
        font-size: 18px;
      }
    }

    border-radius: 8px;
    .el-dialog__title {
      font-size: 16px;
      color: #333;
      letter-spacing: 0;
      position: relative;
      top: -4px;
    }
    input {
      text-indent: 10px;
    }
    .el-form-item__error {
      top: 42px;
      left: 28px;
    }
  }
  .dialog_update_success {
    .el-dialog__body {
      padding-top: 35px;
    }
    .next_btn {
      margin-bottom: 44px;
    }
  }
  .el-step__icon {
    width: 36px !important;
    height: 36px !important;
    // border-color: #479AF2 ;
  }
  .el-step.is-center .el-step__line {
    height: 1px;
    // border: 1px dashed #e4ecf3;
    width: 85px;
    margin-left: 35px;
    margin-top: 5px;
    border-color: #cdd2dc;
    background-color: #cdd2dc;
  }
  .personal_page .el-dialog .el-step__head.is-process {
    border-color: #cdd2dc;
  }
  .personal_page .el-dialog .el-step__head.is-finish {
    border-color: #cdd2dc;
  }
  .el-step__title.is-finish {
    color: #333;
    font-size: 12px;
  }
  .el-step__title.is-process {
    color: #999;
    font-size: 12px;
    font-weight: normal;
  }
  .el-step__title.is-wait {
    color: #999;
    font-size: 12px;
  }
  .el-steps {
    width: 483px;
    margin-top: -32px;
    margin-left: -24px;
  }
  .dialog_form_box {
    width: 350px;
    margin: 0 auto;
    input {
      border-radius: 5px;
      margin-bottom: 22px;
    }
  }
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label::before {
    position: relative;
    left: 56px;
    font-weight: bold;
  }
  .login_name_box {
    label {
      text-indent: -11px;
    }
  }
  .date {
    font-size: 14px;
    color: #999;
  }
}
</style>
